<template>
    <view style="background:#eee; min-height:100%;">
		<view class="body">
			<view v-for="item in friendVerifications" :key="item.fromId + '' + item.toId">
				<view class="rowItem">
				    <image :src="item.headPhoto" class="leftImg"></image>
				    <text class="text" v-text="item.nickname"></text>
					<view v-if="item.fromId == user.userId" class="rightContent">
						<text v-if="item.verificationStatus == 0">等待验证</text>
						<text v-else-if="item.verificationStatus == 1">验证通过</text>
						<text v-else>对方已拒绝</text>
					</view>
					<view v-else class="rightContent">
						<text v-if="item.verificationStatus == 1">已同意</text>
						<text v-else-if="item.verificationStatus == 2">已拒绝</text>
						<view v-else style="overflow: hidden;">
							<button class="leftBtn" @click="accept(item)">同意</button>
							<button class="rightBtn" @click="refuse(item)">拒绝</button>
						</view>
					</view>
				</view>
			</view>
			<view style="text-align: center; padding-top: 100px;" v-if="friendVerifications.length == 0">暂无验证信息</view>
		</view>
		<view class="tabBar">
		    <image class="arrowleft" mode="heightFix" src="http://192.168.43.54:8002/images/icon/news/arrowleft.png" @touchend="back"></image>
		    <text>验证信息</text>
		    <!-- <text class="option" @touchend="enterAdd">添加</text> -->
		</view>
	</view>
</template>

<script>
import { mapState, mapActions } from 'vuex'
export default {
	onLoad() {
		this.getAllVerification()
	},
	data() {
		return {
			
		}
	},
	methods: {
		...mapActions(['setVerifications']),
		back () {
		    uni.navigateBack({
		        delta: 1
		    })
		},
		// enterAdd () {
		//     uni.navigateTo({
		//         url: '/pages/agent/checkInfo'
		//     })
		// },
		getAllVerification() {
			this.$axios.post('hp/selectAllByUserId', this.qs.stringify({
				userId: this.user.userId
			}))
			.then(res => {
				this.setVerifications(res.data.friendVerifications)
			})
			.catch(err => {
				console.log(err)
			})
		},
		accept(item) {
			this.sendMessage({
				userId: item.userId,
				fromId: item.fromId,
				toId: item.toId,
				verificationStatus: 1,
				option: 'accept'
			}, () => {
				for (let i=0; i<this.verifications.length; i++) {
					if (this.verifications[i].fromId == item.fromId && this.verifications[i].toId == item.toId) {
						this.verifications[i].verificationStatus = 1
						break
					}
				}
			})
		},
		refuse(item) {
			this.sendMessage({
				userId: item.userId,
				fromId: item.fromId,
				toId: item.toId,
				verificationStatus: 2,
				option: 'refuse'
			}, () => {
				for (let i=0; i<this.verifications.length; i++) {
					if (this.verifications[i].fromId == item.fromId && this.verifications[i].toId == item.toId) {
						this.verifications[i].verificationStatus = 2
						break
					}
				}
			})
		},
		sendMessage(msg, callback) {
		    msg.type = 'verification'
		    if (this.mySocket.socketOpen) {
		        this.mySocket.socketTask.send({
		            data: JSON.stringify(msg)
		        })
		    } else {
		        // this.mySocket.socketMsgQueue.push(msg)
		    }
		    if (callback) callback()
		}
	},
    computed: {
        ...mapState(['user', 'mySocket', 'verifications']),
		friendVerifications () {
		    return this.verifications
		}
    }
}
</script>

<style scoped>
.tabBar {
    text-align: center;
    font-size: 20px;
    background-color: rgb(0,170,254);
    padding: 3% 11px;
    position: fixed;
    width: 94%;
    color: white;
    top: 0;
    min-height: 30px;
}

.tabBar .arrowleft {
    width: 20px;
    height: 20px;
    position: absolute;
    top: 50%;
    left: 15px;
    transform: translateY(-50%);
}

.tabBar .option {
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
}

.body {
	padding-top: 50px;
}

.rowItem {
    padding: 10px;
    border: 1px solid #eee;
    background-color: white;
    display: flex;
	position: relative;
}

.rowItem .rightContent {
	position: absolute;
	top: 50%;
	right: 15px;
	transform: translateY(-50%);
}

.leftImg {
    height: 45px;
    width: 45px;
    border-radius: 5px;
    margin-right: 20px;
}

.text {
    line-height: 45px;
}

.leftBtn {
	height: 40px;
	background-color: rgb(0,201,251);
	border-radius: 30px 0 0 30px;
	font-size: 13px;
	float: left;
	height: 30px;
	line-height: 30px;
}

.rightBtn {
	height: 40px;
	background-color: rgb(237, 243, 251);
	border-radius: 0 30px 30px 0;
	font-size: 13px;
	float: left;
	height: 30px;
	line-height: 30px;
}
</style>
